// 去除按钮默认样式
@mixin clearBtn{
    border: 0;
    background-color: transparent;
    outline: none;
}

// 图片居中显示
@mixin imgCenter{
    width:50%;
    height: 50%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    &>img{
        width:100%;
    }
}

// 展示页
#product {
    width: 100%;
    background: #f5f5f5;
    padding-bottom: 100px;
    #product-all {
        width: 1200px;
        margin: 0 auto;
        text-align: center;
        background: #f5f5f5;
        box-sizing: border-box;
        // 鼠标悬浮状态
        .product-con:hover .product-copy {
            display: block;
        }
        // 鼠标悬浮状态
        .product-con:hover .product-copy-text {
            top: 440px;
            border: 1px solid red;
            border-top: none;
        }
        // 产品内容框
        .product-con {
            width: 220px;
            margin-top: 10px;
            margin-right: 20px;
            box-sizing: border-box;
            border: 1px solid #eee;
            position: relative;
            background: #fff;
            float: left;
            transition: all 0.35s linear 0s;
            // 左上角图标序数
            .product-num {
                position: absolute;
                top: 0;
                left: 0;
                width: 48px;
                height: 42px;
                color: #fff;
                font-size: 22px;
                z-index: 8;
                .product-num-bg {
                    @extend .product-num;
                }
                .product-num-text {
                    @extend .product-num;
                    text-align: center;
                    line-height: 32px;
                }
            }
            // 产品图片
            .product-img-aa {
                position: relative;
                width: 218px;
                height: 218px;
                background: #fff;
                overflow: hidden;
                .img-aa-con{
                    @include imgCenter;
                    width:100%;
                    height: 100%;
                }
            }
            //复制文案button
            .product-copy {
                position: absolute;
                top: 188px;
                left: 0;
                width: 218px;
                height: 30px;
                background: #ED3A29;
                color: #fff;
                line-height: 30px;
                transition: all 0.35s linear 0s;
                font-size: 14px;
                z-index: 50;
                font-size: 14px;
                display: none;
                opacity: 0.9;
                // 点击复制文案悬浮效果
                .showCopyText {
                    position: absolute;
                    top: 0;
                    left: 225px;
                    width: 0px;
                    height: 302px;
                    background: rgb(40, 43, 46, 0.8);
                    z-index: 200;
                    border-radius: 3px;
                    padding: 20px;
                    transition: all 0.1s linear 0s;
                    display: none;
                    text-align: left;
                    .triangle-left {
                        width: 0;
                        height: 0;
                        border-top: 6px solid transparent;
                        border-bottom: 6px solid transparent;
                        border-right: 6px solid rgb(40, 43, 46, 0.8);
                        position: absolute;
                        top: 8px;
                        left: -6px;
                    }
                    .copyTextCon {
                        width: 100%;
                        height: 100%;
                        .copy-img {
                            width: 100px;
                            height: 100px;
                            overflow: hidden;
                            &>img {
                                width: 100%;
                            }
                        }
                        .copy-text {
                            height: 100px;
                            padding: 5px;
                            background: pink;
                        }
                    }
                }
            }
            // 鼠标悬浮状态
            .product-copy:hover .showCopyText {
                // left: 280px;
                width: 250px;
                display: block;
            }
            // 产品文案
            .product-text {
                position: relative;
                width: 90%;
                height: 40px;
                line-height: 20px;
                font-size: 12px;
                color: #666;
                background-color: #fff;
                z-index: 20;
                user-select: text;
                padding-left:10px;
                cursor: pointer;
            }
            // 产品标题
            .time-count {
                width: 100%;
                height: 40px;
                position: relative;
                background: #fff;
                z-index: 20;
                .time-count-bg {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    background: #fff;
                    margin: 0 auto;
                    &>img {
                        width: 100%;
                    }
                }
                .time-count-h3 {
                    line-height: 37px;
                    position: absolute;
                    text-align: center;
                    height: 40px;
                    width: 100%;
                    font-size: 18px;
                    font-family: 'MicrosoftYaHei';
                }
                .time-count-h3-num {
                    color: orangered;
                }
            }
            // 产品定位设置
            .product-dingwei {
                position: relative;
                top: 0;
                left: 0;
                background: #fff;
                width: 100%;
                height: 1px;
                //复制文案底部
                .product-copy-text {
                    position: absolute;
                    top: 0;
                    left: -1px;
                    width: 218px;
                    height: 100px;
                    background: #fff;
                    color: #666;
                    line-height: 30px;
                    transition: all 0.35s linear 0s;
                    text-align: left;
                    font-size: 12px;
                    border: 1px solid #eee;
                    border-top: none;
                    // box-sizing: border-box;
                    z-index: 10;
                    .copy-text {
                        padding-left: 20px;
                        user-select:text;
                        cursor: pointer;
                    }
                }
            }
            // 进度条
            .percentage {
                width: 100%;
                // height: 30px;
                line-height: 30px;
                position: relative;
                background: #fff;
                padding-top: 4px;
                padding-bottom: 10px;
                z-index: 20;
                .percentage-con {
                    width: 90%;
                    margin: 0 auto;
                }
            }
            // 产品数据
            .product-count {
                width: 100%;
                // height: 68px;
                position: relative;
                background: #fff;
                display: flex;
                z-index: 20;
                .count-price {
                    flex: 10;
                    width: 45%;
                    // height: 60px;
                    float: left;
                    .count-price-text1 {
                        font-size: 14px;
                        height: 30px;
                        padding-left: 8px;
                    }
                    .count-price-text2 {
                        font-size: 18px;
                        color: red;
                        height: 30px;
                        line-height: 30px;
                    }
                }
                .middle-line {
                    flex: 1;
                    .middle-line-con {
                        width: 1px;
                        height: 50px;
                        background-color: #ccc;
                    }
                }
                .count-percent {
                    flex: 10;
                    width: 45%;
                    height: 60px;
                    float: right;
                    font-size: 14px;
                    .count-percent-text1 {
                        font-size: 14px;
                        height: 30px;
                    }
                    .count-percent-text2 {
                        font-size: 18px;
                        height: 30px;
                        color: rgb(27, 122, 230);
                        line-height: 30px;
                    }
                }
            }
            // 分隔的虚线
            .count-line {
                width: 90%;
                height: 2px;
                margin: 0 auto;
                border-bottom: 1px dashed #cecece;
                position: relative;
                background: #fff;
                z-index: 20;
            }
            // 底部优惠券部分
            .product-bottom {
                padding-top: 10px;
                width: 100%;
                height: 30px;
                position: relative;
                background: #fff;
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
                z-index: 20;
                .bottom-price {
                    flex: 1;
                    width: 58px;
                    height: 40px;
                    float: left;
                    text-align: center;
                    line-height: 30px;
                    margin-left: 20px;
                    margin-right: 20px;
                    .price-left {
                        width: 30px;
                        height: 30px;
                        background: red;
                        color: #fff;
                        float: left;
                    }
                    .price-right {
                        width: 50px;
                        height: 30px;
                        border: 1px solid red;
                        box-sizing: border-box;
                        color: red;
                        float: left;
                        font-size: 14px;
                    }
                }
                .bottom-num {
                    flex: 1;
                    margin-left: 20px;
                    margin-right: 20px;
                    position: absolute;
                    right: 0;
                    bottom: 0;
                    float: right;
                    font-size: 12px;
                    color: #333;
                }
            }
        }
        // 鼠标悬浮状态
        .product-con:hover .product-copy-text {
            top: 140px;
            border: 1px solid red;
            border-top: none;
        }
        .product-con:hover {
            border: 1px solid red;
        }
    }
}
// 控制鼠标悬浮元素不够位置时，把对应的元素的悬浮移到左边
@media screen and (min-width:992px) and (max-width:1650px) {
    .product-con:nth-child(5n) .showCopyText{
        left:-295px !important;
    }
}